<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style >
      .active{
        color:red;
      }
      .ftt{
        font-size: 20px;
      }
  </style>
</head>
<body>
  <div id="app">
      <h1>你好设计</h1>

  </div>
  <div id="con">
    vue组件
  </div>
    <script src="./vue.js"></script>
    <script>
      // 将一个模板字符串编译成 render 函数
      // var res = Vue.compile('<div><span>1111{{ msg }}</span></div>')
    // Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
  let myList=Vue.component("myList",{
    template:"#con",
    data(){
      return {}
    }
  })
      new Vue({
        // el:"#app",
        
        data(){
          return{
            msg: 'hello'
          }
        },
        // template:"#app"
        // 什么是虚拟dom: 虚拟dom 是用js对象模拟真实dom，他由标签名,属性，子元素或子组件构成，
        // 因为操作js对象 要比操作真实dom ，性能高很多，在配合diff算法，更高效
        // createElement--创建元素
        // render:res.render,
        // staticRenderFns: res.staticRenderFns
        render:(h)=>h('h1',{
            class:{
              active:true,
              ftt:true
            },
            style:{
              background:"blue"
            },
            attrs:{
              id:"box",
              checked:true
            },
            props:{
              mykk:String
            },
            on:{
              click(){
                console.log("点击事件")
              }
            },
            key: 'myKey',
            ref: 'myRef',
        },["你好啊",h('span',{},"汽车"),h(myList)])
      }).$mount("#app")

    </script>
</body>
</html>